/*
 * @Description: 广告列表
 * @Author: kanglin
 * @Date: 2018-06-19 17:53:26
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.advert-index{
		.meida{
			position:relative;
			margin: 10px auto;
			& > video {
				width: 100%;
			}
			& > img {
				width: 100%;
			}
		}
	}
</style>

<template>

	<div class="advert-index">
		<Table
			:loading="loading"
			:data="adverts"
			:columns="columns"
			:height="tableHeight()"
			class="personal-scrollbar"/>
	</div>

</template>


<script>
import { Button, Tag } from 'iview';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'AdvertIndex',
	mixins: [computedTableHeight],
	props: {
		adverts: {
			type: Array,
			required: true,
		},
		edit: {
			type: Function,
			required: true,
		},
		delete: {
			type: Function,
			required: true,
		},
		loading: {
			type: Boolean,
			required: true,
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('advert.customer'),
					key: 'customer_id',
					align: 'center',
					render: (h, { row }) => {
						const name = row.customer && row.customer.name ? row.customer.name : this.$t('common.none');
						return (<div>{name}</div>);
					},
				},

				{
					title: this.$t('advert.name'),
					align: 'center',
					render: (h, { row }) => {
						const name = row.customer && row.name ? row.name : this.$t('common.none');
						return (<div>{name}</div>);
					},
				},
				{
					title: this.$t('advert.media_type'),
					key: 'advert_type_id',
					align: 'center',
					render: (h, { row }) => (
						<div>{row.advert_type_id === 1 ? this.$t('advert.image') : this.$t('advert.video')}</div>
					),
				},
				{
					title: this.$t('advert.device_account'),
					width: 300,
					key: 'device_accounts',
					align: 'center',
					render: (h, { row }) => {
						const device = row.device_accounts
							.map(item => (<Tag type="border">{item.account || this.$t('common.none')}</Tag>));
						return <div>{device}</div>;
					},
				},
				{
					title: this.$t('advert.content_key'),
					width: 240,
					key: 'content_key',
					align: 'center',
					render: (h, { row }) => {
						let content = <div>{this.$t('common.none')}</div>;
						const is_image = row.advert_type_id === 1;
						const is_video = row.advert_type_id === 2;
						if (row.content_key && is_image) {
							content = <img src={row.content_key} />;
						} else if (row.content_key && is_video) {
							content = <video controls="controls" src={row.content_key} preload="none" />;
						}
						return (<div class="meida">{content}</div>);
					},
				},
				{
					title: `${this.$t('advert.play_second')}`,
					key: 'play_second',
					align: 'center',
				},
				{
					title: this.$t('advert.created_at'),
					key: 'created_at',
					width: 150,
					align: 'center',
				},
				{
					title: this.$t('advert.operation'),
					align: 'center',
					render: (h, { row }) => {
					  const advert = row;
            advert.device_account_ids = advert.device_accounts.map(item => item.id);

						return (
							<div>
								<Button name="index__edit" size="small" onClick={() => { this.edit(advert); }} type="primary">{this.$t('common.edit')}</Button>
								<Button name="index__delete" size="small" style="margin-left: 8px" onClick={() => { this.confirmDelete(advert.id); }} type="error">{this.$t('common.delete')}</Button>
							</div>
						);
					},
				},
			],
		};
	},
	methods: {
		/**
		 *  确认删除
		 * 	@param {Number} id {广告ID}
		 * 	@return {undefined}
		 */
		confirmDelete(id) {
			this.$Modal.confirm({
				title: this.$t('advert.is_delete'),
				okText: this.$t('common.confirm'),
				cancelText: this.$t('common.cancel'),
				onOk: () => {
					this.delete(id);
				},
			});
		},


	},
};
</script>
